<style lang="less" scoped>
.adytum-info {
  position: relative;
  background-color: #fff;
  .triangle-up {
    margin-left: -0.08rem;
    position: absolute;
    left: 50%;
    top: -0.08rem;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 0.08rem solid transparent;
    border-right: 0.08rem solid transparent;
    border-bottom: 0.08rem solid #fff;
  }
  .adytum-title {
    padding: 0.1rem;
    border-bottom: 0.005rem solid #ddd;
    h4 {
      color: #000;
    }
    p {
      font-size: 0.14rem;
      color: #888;
      span {
        color: #ddd;
      }
      em {
        vertical-align: middle;
        font-size: 0.1rem;
        font-style: normal;
        color: #fb6165;
      }
    }
  }
  .adytum-detail {
    padding: 0.08rem 0.15rem 0;
    border-bottom: 0.005rem solid #ddd;
    h4 {
      margin-bottom: 0.08rem;
    }
    p {
      font-size: 0.14rem;
      color: #888;
      &.am-ft-ellipsis {
        white-space: initial;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    .adytum-list-arrow {
      text-align: center;
      span.arrow {
        display: inline-block;
        padding: 0.1rem;
        width: 0.16rem;
        height: 0.16rem;
        overflow: hidden;
        &.up {
          &:before {
            margin: 0.05rem 0 0 0.02rem;
            transform: rotate(225deg);
          }
        }
        &:before {
          content: '';
          display: block;
          width: 0.08rem;
          height: 0.08rem;
          border: 0.02rem solid #ccc;
          color: #ccc;
          border-top: 0 none;
          border-left: 0 none;
          margin-left: 0.02rem;
          transform: rotate(45deg);
        }
      }
    }
  }
}
</style>

<template>
  <div class="adytum-info">
    <div class="triangle-up"></div>
    <div class="adytum-title am-ft-center">
      <h4>{{info.title}}</h4>
      <p>{{info.peoples}}人体验最佳
        <span>|</span> {{info.time}}分钟
        <span>|</span> 难度系数
        <em v-for="item in info.difficulty">★</em>
      </p>
    </div>
    <div class="adytum-detail">
      <h4>主题介绍</h4>
      <p :class="{'am-ft-ellipsis':ellipsis}">{{info.remarks}}</p>
      <div v-if="arrow" class="adytum-list-arrow">
        <span @click="ellipsisChange" class="arrow" :class="{'up':!ellipsis}"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'info',
  props: ['info'],
  data() {
    return {
      ellipsis: true,
      arrow: true
    };
  },
  mounted() {},
  methods: {
    ellipsisChange() {
      if (this.ellipsis) {
        this.ellipsis = false;
      } else {
        this.ellipsis = true;
      }
    }
  }
};
</script>
